<template>
  <van-tabs class="catetabs" v-model:active="active">
    <van-tab
      v-for="(item,index) in categoryList"
      :key="index"
      :title="item.name"
      :to="'/goodslist/' + categoryId + '/' + item.id"
      replace
    >
      <!-- {{item.name}} -->
    </van-tab>
  </van-tabs>
</template>
<script>
export default {
  name: "CateTab",
  data() {
    return {
      active: 0,
    }
  },
  props: {
    categoryList: Array,
    categoryId: String,
  },
  created() {
    var timeInterval = setInterval(() => {
      if (this.categoryList.length > 0) {
        clearInterval(timeInterval);
        this.keepActive();
      }
    }, 50);
  },
  methods: {
    keepActive() {
      for (let i = 0; i < this.categoryList.length; i++) {
        // console.log('......');
        if (this.categoryList[i].id == this.$route.params.subCategoryId) {
          this.active = i;
          break;
        }
      }
    },
  },
};
</script>
<style scoped>
.catetabs {
  position: sticky;
  top: 44px;
  background-color: #fff;
  z-index: 3;
}
</style>